<template>
  <view class="m-app">
    <!-- 这里放几张做好的菜 -->
    <up-swiper :list="list1" />
    <view class="m-title">在下面点餐吧</view>
    <view class="m-menu">
      <scroll-view scroll-y class="food-box">
        <view
          scroll-y
          class="food-list"
          v-for="(item, index) in foodlist"
          :key="index"
        >
          <view class="img">
            <image :src="item.FoodImage" />
            <view class="price">
              <text>{{ item.FoodName }}</text>
              <text class="price-num">
                <text>￥0</text>
                <text class="origin">￥{{ item.Price }}</text>
              </text>
            </view>
          </view>
          <view class="count-box">
            <up-icon
              name="minus-circle"
              :size="20"
              color="#ff899d"
              v-if="getcount(item.id)"
              @click="sub(item)"
            />
            <text class="material-number-num" v-if="getcount(index)">{{
              getcount(item.id)
            }}</text>
            <up-icon
              name="plus-circle"
              :size="20"
              color="#ff899d"
              @click="add(item)"
            />
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 购物车 -->
    <view class="cart">
      <view class="badge" @click="show = true">
        <up-icon name="shopping-cart" :size="50" color="#ff899d" />
        <view class="up-badge">
          <up-badge :type="type" max="99" :value="cartList.length"></up-badge>
        </view>
      </view>
    </view>
  </view>
  <!-- 弹出层 -->
  <up-popup v-model:show="show" round="10" mode="center" @close="show = false">
    <view class="pop-box">
      <view class="pop-item" v-for="item in cartList" :key="item.id">
        <view class="img">
          <image :src="item.FoodImage" />
        </view>
        <view class="info">
          <view class="cart-name">{{ item.FoodName }}</view>
          <view class="count"><text>x</text>{{ item.Count }}</view>
        </view>
      </view>
    </view>
    <view class="btn-box"
      ><view class="btn" @click="submit">点我下单</view></view
    >
  </up-popup>
</template>

<script setup lang="ts">
import { reactive, ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { orderAdd, getFoodlist } from '@/api/home'
import useStore from '@/store'

const store = useStore()
const { useCart } = store

const show = ref(false)

// 食物商品列表
const foodlist = ref([])

// 购物车列表
const cartList = computed(() => useCart.getFoodCart)

const getcount = (id: number) => useCart.getCountById(id) > 0

const add = (food) => {
  if (getcount(food.id)) return
  useCart.addToCart({ ...food, Count: 0 })
}

const sub = (food) => {
  if (!getcount(food.id)) return
  useCart.reduceCount({ ...food, Count: 1 })
}

const submit = async () => {
  const res = await orderAdd({
    foodData: cartList.value
  })
  if (res.code === 200) {
    show.value = false
    useCart.clearCart()
    uni.showToast({
      title: '提交成功',
      icon: 'success'
    })
  }
}

const type = ref('warning')
// 使用 reactive 创建响应式数组
const list1 = reactive([
  'http://www.szzoe.cn/Uploads/2019-07-29/5d3e63b31e0a6.jpg',
  'https://cp1.douguo.com/upload/caiku/9/f/1/960_9fb800dd79b32e1dd19d1340964d7c91.jpg'
])

onLoad(async () => {
  const res = await getFoodlist()
  foodlist.value = res.data
})
</script>

<style lang="scss" scoped>
.m-app {
  width: 100%;
  .m-title {
    width: 94%;
    margin: 0 auto;
    padding: 20rpx 0;
    color: #e49db2;
  }
  .m-menu {
    width: 96%;
    margin: 0 auto;
    padding-bottom: 20rpx;
    .food-list {
      width: 90%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      margin-top: 20rpx;
      background-color: rgba(231, 175, 191, 0.3);
      padding: 30rpx;
      border-radius: 16rpx;
      .img {
        width: 60%;
        height: 140rpx;
        display: flex;
        image {
          width: 140rpx;
          height: 140rpx;
        }
        .price {
          margin-left: 20rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .price-num {
            color: #e49db2;
            .origin {
              text-decoration: line-through;
              color: #000;
              font-size: 20rpx;
              margin-left: 10rpx;
            }
          }
        }
      }
      .count-box {
        display: flex;
        align-items: center;
        .material-number-num {
          color: #ff899d;
        }
      }
    }
  }
  .cart {
    width: 120rpx;
    height: 120rpx;
    background-color: rgba(255, 255, 255, 0.9);
    position: fixed;
    top: 80%;
    z-index: 3;
    border-radius: 50%;
    .badge {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      .up-badge {
        position: absolute;
        top: 10%;
        right: 10%;
      }
    }
  }
}
.pop-box {
  width: 70vw;
  height: auto;
  padding: 50rpx 20rpx 50rpx 50rpx;
  .pop-item {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20rpx;
    .img {
      width: 160rpx;
      height: 160rpx;
      image {
        width: 100%;
        height: 100%;
        border-radius: 16rpx;
      }
    }
    .info {
      margin-left: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 10rpx 0;
      .cart-name {
        color: #ff899d;
      }
      .count {
        text {
          margin-right: 10rpx;
        }
      }
    }
  }
}
.btn-box {
  width: 70vw;
  padding: 30rpx 10rpx 30rpx 30rpx;
  display: flex;
  justify-content: flex-end;
  .btn {
    width: 30%;
    padding: 10rpx;
    background-color: #ff899d;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16rpx;
  }
}
</style>
